<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间戳转换</title>
    <!---->
    <!--<script src=""></script>-->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/moment.js/2.29.1/moment.min.js"  ></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/moment-timezone/0.5.34/moment-timezone-with-data-2012-2022.min.js"></script>
    <style>
      #app {
        display: flex;
        align-items: center;
        flex-direction: column;
      }

      .block {
        margin-top: 20px;
      }

      input {
        border: 1px solid black;
        padding: 10px 5px;
        margin: 8px 0;
      }

      span {
        border: 1px solid black;
        padding: 2px 5px;
        white-space: nowrap;
      }

      .row {
        display: grid;
        grid-template-columns: repeat(3, 250px);
      }

      .code {
        font-size: 0.7rem;
        background-color: #f8f8f8;
        display: table;
        padding: 5px;
      }

      button {
        padding: 10px 20px;
      }
    </style>
</head>
<body>

<div id="app">
    <div v-for="url in urls">
        <a :href="url" target="_blank" v-text="url"></a>
    </div>
    <div class="block">
        本机时间:
        <div class="row">
            <span v-text="curTimeZone"></span>
            <span v-text="curTimeStr"></span>
            <span v-text="curTimeLong"></span>
        </div>
    </div>

    <div class="block">
        <div>
            自定义时区(用','分隔; 错误值时,会使用本机时区)
            <button @click="doUpdateInputTimeZone">刷新</button>
            <button style="margin-left: 200px" @click="resetInputTimeZone">还原</button>
        </div>
        <div class="code">问ai: 请列出 x 的IANA 常用时区</div>
        <textarea v-model="inputTimeZone"
                  style="width: 750px; height: 38px; padding: 5px; border-style: inset; resize: none">
        </textarea>
    </div>

    <div class="block">
        <div>
            时间戳(ms或s): <input v-model="inputLong">
        </div>
        <div class="row" v-for="result in inputLongResult">
            <span v-text="result[0]"></span>
            <span v-text="result[1]"></span>
            <span v-text="result[2]"></span>
        </div>
    </div>
    <div class="block">
        <div>
            时间[YYYY-MM-DD HH:mm:ss]: <input v-model="inputStr">
        </div>
        <div class="row" v-for="result in inputStrResult">
            <span v-text="result[0]"></span>
            <span v-text="result[1]"></span>
            <span v-text="result[2]"></span>
        </div>
    </div>
</div>

<!--一般工具类-->
<script>
  const storageUtil = {
    /**
     * 存储localStorage
     */
    setStore(key, data) {
      if (!key) return
      if (typeof data !== 'string') {
        data = JSON.stringify(data)
      }
      window.localStorage.setItem(key, data)
    },

    /**
     * 获取 字符串
     */
    getString(key, defValue) {
      if (!key) return defValue
      let res = window.localStorage.getItem(key)
      if (!res) return defValue
      return res
    },
    /**
     * 获取 [json, bool等]
     */
    getObject(key, defValue) {
      if (!key) return defValue
      let res = window.localStorage.getItem(key)
      if (!res) return defValue
      return JSON.parse(res)
    },

    /**
     * 删除localStorage
     */
    removeStore(key) {
      if (!key) return
      window.localStorage.removeItem(key)
    },
  }
</script>
<!--业务代码-->
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        urls: [
          'http://www.24timemap.com/',
          'https://tool.lu/timestamp/',
          'https://baike.baidu.com/item/夏令时',
          '',
        ],
        //[时区, 备注]
        defaultTimeZones: [
          ['Etc/GMT', 'UTC/GMT'],
          ['Asia/Shanghai', 'UTC/GMT +8小时 (东八区)'],
          ['America/New_York', 'UTC/GMT -5小时 (西五区)'],
        ],
        //用户输入的时区
        defaultInputTimeZone: 'Europe/London,Europe/Paris,Australia/Sydney,Africa/Johannesburg,Asia/Tokyo,Pacific/Honolulu,Asia/Kolkata,,,,,,,',
        inputTimeZone: '',
        //
        curTimeLong: '',
        curTimeStr: '',
        curTimeZone: '',
        //输入时间戳
        inputLong: '',
        inputLongResult: [],
        //输入 时间字符串
        inputStr: '',
        inputStrResult: [],
      }
    },
    watch: {
      inputLong(newValue) {
        this.updateLongResult();
      },
      inputStr() {
        this.updateStrResult();
      },
    },
    mounted() {
      this.inputTimeZone = storageUtil.getString('inputTimeZone', this.defaultInputTimeZone);
      // console.log('全部时区', moment.tz.names())
      this.initRealTime();
      //触发watch
      this.inputLong = this.curTimeLong + '';
      this.inputStr = moment(this.curTimeLong).tz(this.curTimeZone).format("YYYY-MM-DD HH:mm:ss")
    },
    methods: {
      initRealTime() {
        let updateRealTime = () => {
          this.curTimeLong = Date.now();
          this.curTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;//支持实时切换时区
          this.curTimeStr = moment(this.curTimeLong).tz(this.curTimeZone).format("YYYY-MM-DD HH:mm:ss")
        };
        updateRealTime.call();
        setInterval(updateRealTime, 1000);
      },
      /**
       * [时间戳]转[字符串]
       */
      updateLongResult() {
        let newValue = this.inputLong;
        newValue = newValue.trim();
        if (!newValue) return;
        if (newValue.length !== 10 && newValue.length !== 13) return;
        console.log('updateLongResult', typeof newValue, newValue);

        if (newValue.length === 10) newValue += '000';
        this.inputLongResult = [];
        for (let timeZone of this.defaultTimeZones) {
          this.inputLongResult.push([
            timeZone[0],
            moment(parseInt(newValue)).tz(timeZone[0]).format("YYYY-MM-DD HH:mm:ss"),
            timeZone[1],
          ])
        }
        for (let timeZone of this.inputTimeZone.split(',')) {
          if (!timeZone) continue;
          this.inputLongResult.push([
            timeZone,
            moment(parseInt(newValue)).tz(timeZone).format("YYYY-MM-DD HH:mm:ss"),
            '',
          ])
        }
      },
      /**
       * [字符串]转[时间戳]
       */
      updateStrResult() {
        let newValue = this.inputStr;
        newValue = newValue.trim();
        if (newValue.length !== 19) return;
        console.log('updateStrResult', typeof newValue, newValue);

        this.inputStrResult = [];
        for (let timeZone of this.defaultTimeZones) {
          this.inputStrResult.push([
            timeZone[0],
            moment.tz(newValue, 'YYYY-MM-DD HH:mm:ss', timeZone[0]).valueOf(),
            timeZone[1],
          ])
        }
        for (let timeZone of this.inputTimeZone.split(',')) {
          if (!timeZone) continue;
          this.inputStrResult.push([
            timeZone,
            moment.tz(newValue, 'YYYY-MM-DD HH:mm:ss', timeZone).valueOf(),
            '',
          ])
        }
      },
      doUpdateInputTimeZone() {
        this.updateLongResult();
        this.updateStrResult();
        storageUtil.setStore('inputTimeZone', this.inputTimeZone)
      },
      resetInputTimeZone() {
        this.inputTimeZone = this.defaultInputTimeZone;
        this.doUpdateInputTimeZone()
      }
    },
  })
</script>
</body>
</html>